<template>
  <div class="container">
    <div class="top">
      <el-card>
        <!-- 查询条件 -->
        <el-form ref="queryFormRef" :model="queryForm" label-width="100px">
          <el-row :gutter="16">
            <el-col :span="4">
              <el-form-item label="运维对象：" prop="obj">
                <el-input v-model="queryForm.obj"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="警告来源：" prop="source">
                <el-select v-model="queryForm.source" clearable>
                  <el-option v-for="dict in dict.sourceList"
                             :key="dict.sourcename"
                             :label="dict.sourcename"
                             :value="dict.sourcename">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="IP：" prop="ip">
                <el-input v-model="queryForm.ip"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="详细信息：" prop="remark">
                <el-input v-model="queryForm.remark"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="处理状态：" prop="state">
                <el-select v-model="queryForm.state" clearable>
                  <el-option v-for="dict in dict.stateList"
                             :key="dict.satteid"
                             :label="dict.statename"
                             :value="dict.satteid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="4">
              <el-form-item label="告警等级：" prop="level">
                <el-select v-model="queryForm.level" clearable>
                  <el-option v-for="dict in dict.levelList"
                             :key="dict.levelid"
                             :label="dict.levelname"
                             :value="dict.levelid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--   <el-col :span="4">
                   <el-form-item label="警告大类：" prop="type">
                       <el-select v-model="queryForm.type" clearable>
                           <el-option v-for="dict in dict.sourceList"
                           :key="dict.sourcename"
                           :label="dict.sourcename"
                           :value="dict.sourcename">
                           </el-option>
                       </el-select>
                   </el-form-item>
               </el-col>-->
            <!-- <el-col :span="4">
                <el-form-item label="告警日期：" prop="date">
                    <el-date-picker
                        v-model="queryForm.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-col> -->
            <el-col :span="4">
              <el-form-item>
                <el-button style="margin-left: 200px;" @click="resetForm" type="primary" plain>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="middle">
      <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column label="序号" type="index" :index="getIndex" width="55"></el-table-column>
        <el-table-column label="运维对象" prop="objName" width="120"></el-table-column>
        <el-table-column label="类型" prop="analyType" width="120"></el-table-column>
        <el-table-column label="来源" prop="analySource" width="120"></el-table-column>
        <el-table-column label="等级" prop="analyLevel" width="60">
          <template slot-scope="scope">
            <span>{{ getLevel(scope.row.analyLevel) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="IP" prop="analyIp" width="120"></el-table-column>
        <el-table-column label="catalog" prop="catalog" width="120"></el-table-column>
        <el-table-column label="处理状态" prop="state" width="120">
          <template slot-scope="scope">
            <span>{{ getState(scope.row.state) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="告警日期" prop="analyDate" width="120"></el-table-column>
        <el-table-column label="收敛量" prop="convergence" width="120"></el-table-column>
        <el-table-column label="详细信息" prop="remark"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state!='1' && scope.row.state!='3' " type="text"
                       @click="check(scope.row.id,1)" size="small" plain>确认
            </el-button>
<!--            <el-button v-if="scope.row.state!='2' && scope.row.state!='3' " type="danger" @click="check(scope.row.id,2)"-->
<!--                       size="small" plain>屏蔽-->
<!--            </el-button>-->
<!--            <el-button v-if="scope.row.state!='3'" type="danger" @click="check(scope.row.id,3)" size="small" plain>-->
<!--              处理-->
<!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryForm.pageSize"
        :current-page="queryForm.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import {queryList, updateState} from "@/api/system/analysisview"

export default {
  name: 'AnalyRight',
  props: ['tbId'],
  data() {
    return {
      // 索引起始大小
      start: 0,
      // 查询参数
      queryForm: {
        obj: "",
        source: "",
        ip: "",
        remark: "",
        state: "",
        level: "",
        type: "",
        tbId: this.tbId,
        date: [],
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      // 字典
      dict: {
        sourceList: [
          {sourcename: '日检'}, {sourcename: '基线'}, {sourcename: '运维经验'}, {sourcename: '日志'}
        ],
        stateList: [
          {satteid: 0, statename: '未处理'},
          {satteid: 1, statename: '已确认'},
          {satteid: 2, statename: '已屏蔽'},
        ],
        levelList: [
          {levelid: 1, levelname: '严重'},
          {levelid: 2, levelname: '错误'},
          {levelid: 3, levelname: '警告'},
          {levelid: 4, levelname: '信息'},
        ],
      },
      // 表格数据
      tableData: null,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.queryForm.pageSize = val
    },
    handleCurrentChange(val) {
      this.queryForm.pageNumber = val
    },
    // 返回索引
    getIndex(v) {
      return this.start + v + 1
    },
    // 加载数据
    async initData() {
      const {data: {pageNumber, pageSize, total, data: data2}} = await queryList(this.queryForm);
      this.tableData = data2
      this.queryForm.pageNumber = pageNumber
      this.queryForm.pageSize = pageSize
      this.total = total
    },
    // 重置表单
    resetForm() {
      this.$refs.queryFormRef.resetFields()
    },
    // 返回状态
    getState(code) {
      if (code === '0') {
        return '未处理'
      } else if (code === '1') {
        return '已确认'
      } else if (code === '3') {
        return '已处理'
      } else {
        return '已屏蔽'
      }
    },
    // 确认或屏蔽
    check(id, code) {
      let text = '';

      if (code === 1) {

        text = '确认'
      }
      if (code === 2) {

        text = '屏蔽'
      }
      if (code === 3) {

        text = '处理'
      }
      this.$confirm('要' + text + '此数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateState(id, code).then(response => {
          this.$message({
            type: response.code === 200 ? 'success' : 'error',
            message: response.code === 200 ? text + '成功' : text + "失败"
          })
          //回显
          this.initData()
        })
      })
    },
    // 返回等级
    getLevel(code) {
      if (code === '1') {
        console.log("1" + code)
        return '严重'
      } else if (code === '2') {
        console.log("2" + code)
        return '错误'
      } else if (code === '3') {
        return '警告'
      } else if (code === '4') {
        console.log("4" + code)
        return '信息'
      }
    }
  },
  mounted() {
    this.initData()
  },
  watch: {
    //侦听queryForm
    queryForm: {
      deep: true,
      handler(newValue, oldValue) {
        this.initData()
      }
    }
  }
}

</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}

.middle {
  margin: 10px;
  width: 100%;
}
</style>
